<template>
	<view>
      <!-- 标题s start -->
      <cu-custom bgColor="bg-gradual-blue" :isBack="true">
        <block slot="content">已报名项目</block>
      </cu-custom>
      <!-- 标题 end -->
      <!-- 搜索 start -->
      <u-search v-model="title" @search="initData"></u-search>
      <!-- 搜索 end -->
      <!-- 列表 start -->
      <ProjectList v-on="listItemEvent" :config="listItemConfig" v-model="infoList">
        <template v-slot:default="item">
          <button @click="startViewDetail(item.info)" class="btn" style="margin-right: 10px;" size="mini"
                  type="primary">项目详情
          </button>
          <button style="margin-right: 10px;"
                  v-if="(item.info.selectmode != 6 && item.info.selectmode != 12 && item.info.selectmode != 13  )  && item.info.bpmStatus == 3 && item.info.ifbm == 1 && item.info.ifbj == 0"
                  @click="handleBaojia(item.info)" class="btn" size="mini" type="primary">我要报价
          </button>
          <button style="margin-right: 10px;" @click="cancelBaojia(item.info)"
                  v-if="item.info.ifbj == 1 && item.info.ifxz == 0 && item.info.state != 3 " class="btn" size="mini"
                  type="primary">撤销报价
          </button>
          <button @click="viewBaojiaDetail(item.info)" v-if="item.info.ifbj == 1" size="mini" class="btn"
                  type="primary">报价详情
          </button>
        </template>
      </ProjectList>
      <!-- 列表 end -->
      <!--   报价详情弹窗 start   -->
      <uni-popup ref="baojiaDetail" type="dialog">
        <view class="option-dialog col-warpper">
          <view class="option-con">
            <view class="title row-warpper">报价详情</view>
            <view class="option">
              <uni-section type="line" title="项目名称">
                {{ projectDetail.title }}
              </uni-section>
              <uni-section type="line" title="中介机构">
                {{ companyInfo.companyname }}
              </uni-section>
              <uni-section type="line" title="报价金额	">
                {{ activeBaojiaInfo.baojia }}(万元)
              </uni-section>
              <uni-section type="line" title="报价时间">
                {{ nowTime }}
              </uni-section>
            </view>
          </view>
          <view class="form-item submit-con row-warpper" style="justify-content: flex-end;">
            <button @click="$refs.baojiaDetail.close()" class="cancel-btn" size="mini"
                    type="default">取消
            </button>
          </view>
        </view>
      </uni-popup>
      <!--   报价详情弹窗 start   -->
      <!-- 项目详情弹窗 start -->
      <uni-popup ref="projectDetail" type="dialog">
        <view class="option-dialog">
          <ViewDetail :project-detail="projectDetail" title="项目详情"/>
          <view class="form-item submit-con row-warpper" style="justify-content: flex-end;">
            <button @click="$refs.projectDetail.close()" class="cancel-btn" size="mini"
                    type="default">取消
            </button>
          </view>
        </view>
      </uni-popup>
      <!-- 项目详情弹窗 end -->
      <!-- 报价弹窗 start -->
      <uni-popup ref="baojia" type="dialog">
        <view class="option-dialog col-warpper">
          <view style="height: 80vh" class="option-con">
            <view class="title row-warpper">我要报价</view>
            <view class="option">
              <uni-section type="line" title="项目名称">
                {{ projectDetail.title }}
              </uni-section>
              <uni-section type="line" title="中介机构">
                {{ companyInfo.companyname }}
              </uni-section>
              <uni-section type="line" title="报价金额	">
                <input class="baojia-input" v-model="baojia"/>(万元)
              </uni-section>
              <uni-section type="line" title="报价时间">
                {{ nowTime }}
              </uni-section>
            </view>
          </view>
          <view class="form-item submit-con row-warpper" style="justify-content: flex-end;">
            <button @click="$refs.baojia.close()" class="cancel-btn" size="mini" type="default">取消</button>
            <button @click="handleSubmitBaojia" size="mini" type="primary">确定</button>
          </view>
        </view>
      </uni-popup>
      <!-- 报价弹窗 end -->
    </view>
</template>

<script>
import projectRequest from "../../../common/request/projectRequest.js"
// import projectRequest from "../../../request/projectRequest.js"
import ProjectList from "./components/ProjectList.vue"
import sysRequest from "../../../common/request/sysRequest.js"
import onlineRequest from "../../../common/request/onlineRequest.js"
import baomingRequest from "../../../common/request/baomingRequest.js"
import ViewDetail from "./components/ViewDetail";

export default {
  mixins: [baomingRequest, projectRequest, sysRequest, onlineRequest],
  components: {
    ProjectList, ViewDetail
  },
  created() {
    // 获取部门信息和中介机构主体信息后 加载数据
    this.getIdentity((res) => {
      this.initData()
    })
  },
  computed: {
    nowTime() {
      const now = new Date()
      let year = now.getFullYear()
      let month = this.makeDateStr(now.getMonth() + 1)
      let day = this.makeDateStr(now.getDate())
      let hover = this.makeDateStr(now.getHours())
      let minute = this.makeDateStr(now.getMinutes())
      let sec = this.makeDateStr(now.getSeconds())
      return `${year}-${month}-${day} ${hover}:${minute}:${sec}`
    },
    baojiaParmas() {
      const pd = {
        baojia: this.baojia
      }
      const info = {
        ...this.activeBaojiaInfo
      }
      return Object.assign(info, pd)
    }
  },
  data() {
    return {
      // --- 配置列表 ---
      shifouList: [],
      zdxmList: [],
      //  --- 数据 ---
      activeBaojiaInfo: {},
      baojia: "",
      infoList: [],
      title: undefined,
      currentUserDeparts: {}, // 部门信息
      companyInfo: {}, // 主体信息
      activeProject: {}, // 当前项目
      projectDetail: {},
      //  --- 组件配置 ---
      // 列表
      listItemConfig: {
        showArrow: false,
        clickable: false
      },
      listItemEvent: {
        beClick: (item) => {
          this.activeProject = item
          this.getProjectDetail(this.activeProject.id, {}, data => {
            this.projectDetail = data
            this.$refs.option.open()
          })
        }
      },
      // 操作按钮
      detailEvent: { // 项目详情按钮事件
        click: () => {
          this.$refs.projectDetail.open()
        }
      },
      signUpEvent: { // 注册按钮事件
        click: () => {
          this.$refs.signUp.open()
        }
      },
      // 表单抽屉
      detatilDrawerConfig: {
        width: 350,
      },
      signUpDrawerConfig: {
        width: 350
      },
      closeBtnEvent: {
        click: () => {
          this.$refs.projectDetail.close()
        }
      },
      closeBtnConfig: {}
    }
		},
		methods: {
          /**
           * 查看报价详情
           * @param record
           */
          viewBaojiaDetail(record) {
            this.activeProject = record
            this.getProjectDetail(this.activeProject.id, {}, data => {
              this.projectDetail = data
              const pd = {
                id: record.bmid
              }
              this.getBaomingList(pd, data => {
                this.activeBaojiaInfo = data.records[0]
                this.$refs.baojiaDetail.open()
              })
            })
          },
          /**
           * 撤销报价
           * @param {Object} record
           */
          cancelBaojia(record) {
            uni.showModal({
              title: "是否撤销报价？",
              success: (res) => {
                if (res.confirm) {
                  const pd = {
                    id: record.bmid
                  }
                  this.revokebaojia(pd, data => {
                    this.$tip.toast(data.message)
                    this.initData()
                  })
                }
              },
            })
          },
          /**
           * 开始报价
           * @param {Object} item
           */
          handleBaojia(item) {
            this.activeProject = item
            this.getProjectDetail(this.activeProject.id, {}, data => {
              this.projectDetail = data
              const pd = {
                id: item.bmid
              }
              this.getBaomingList(pd, data => {
                this.activeBaojiaInfo = data.records[0]
                this.baojia = ""
                this.$refs.baojia.open()
              })
            })
          },
          /**
           * 提交报价
           */
          handleSubmitBaojia() {
            this.editBaoming(this.baojiaParmas, data => {
              this.$tip.toast(data.message)
              this.$refs.baojia.close()
              this.initData()
            })
          },
          /**
           * 预览详情
           * @param {Object} item
           */
          startViewDetail(item) {
            this.activeProject = item
            this.getProjectDetail(this.activeProject.id, {}, data => {
              this.projectDetail = data
              this.$refs.projectDetail.open()
            })
          },
          /**
           * 提交
           */
          sumitProjectRegist() {
            cosole.log("", this.currentUserDeparts)
          },
          /**
           * 处理时间字符串 <10 则加0 >10则不加
           * @param {Object} timeNum
           */
          makeDateStr(timeNum) {
            return timeNum < 10 ? `0${timeNum}` : timeNum
          },
          /**
           * 获取部门信息和中介机构主体信息
           */
          getIdentity(callback) {
            // 所属部门信息
            this.getCurrentUserDeparts({}, data => {
              data.list.forEach(item => {
                if (item.orgCode === data.orgCode) {
                  this.currentUserDeparts = item
                }
              })
              const params = {
                departid: this.currentUserDeparts.id
              }
              // 中介机构主体信息
              this.getCompanyInfo(params, ret => {
                if (ret.total === 0) {
                  this.$tip.error("请添加中介机构机构主体信息!")
                  return
                }
                if (ret.records[0].bpm_status !== '3') {
                  this.$tip.error("中介机构主体信息未审核通过，不能进行项目报名！")
                  return
                }
                this.companyInfo = ret.records[0]
                callback()
              })
            })
          },
			/**
			 * 加载数据
			 */
			initData() {
				const params = {
					_t: 1667807209,
					ifbm: 1,
					column: 'createTime',
					order: 'desc',
					field: 'id,,title,yezhuname,xmlxr,xmlxrdh,selectmode_dictText,state_dictText,baoming_dictText,checked_dictText,baojia_dictText,zhongxuan_dictText,action',
					pageNo: 1,
					pageSize: 10
				}
				this.getSearch(params, data => {
					this.infoList = data
				})
			},
			/**
			 * 是否
			 * @param {Object} number
			 */
			shifouFilters(number) {
				let result = ""
				this.shifouList.forEach(item => {
					if (number === item.value) {
						result = item.label
					}
				})
				return result
			},
			/**
			 * 重点项目
			 * @param {Object} number
			 */
			zdxmFilters(number) {
				let result = ""
				this.zdxmList.forEach(item => {
					if (number === item.value) {
						result = item.label
					}
				})
				return result
			}
		}
	}
</script>

<style lang="less" scoped>
/deep/ .uni-section-content {
  padding: 0 10px;
  font-size: 18px;
}

.baojia-input {
  padding: 4px;
  font-size: 18px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.option {
  padding: 5px;

  .btn {
    margin: 0px 4px;
  }
}

.option-dialog {
  padding: 12px;
  min-height: 80vh;
  min-width: 100vw;
  justify-content: space-between;
  align-items: stretch;
  background-color: #ffffff;
  //border-radius: 0 0 14px 14px;

  .title {
    align-self: stretch;
    justify-content: center;
    padding: 5px;
    color: #909399;
    border-bottom: 1px solid #909399;
  }

  .option {
    padding: 5px;

    .btn {
      margin: 5px;
    }

    .radio-con {
      label {
        margin: 0 5px;

        radio {
          margin-right: 3px;
        }
      }
    }
  }
	}

	.project-detail {
      justify-content: center;
      height: 30vh;
      padding: 50px 15px 15px 15px;
    }

	// --- 我要报名弹窗 ---
	.signUp-dialog {
      padding: 12px;
      background-color: #ffffff;
      //border-radius: 0 0 14px 14px;

      .option-con {
        height: 85vh;
      }

      .title-con {
        justify-content: center;
      }

      .title {
        align-self: stretch;
        justify-content: center;
        padding: 5px;
        color: #909399;
        border-bottom: 1px solid #909399;
        margin-bottom: 2px;
      }

      .value {
        width: 65vw;
        white-space: nowrap;
        overflow: scroll;
      }
    }

	.submit-con {
		uni-button {
			margin: 0;
		}

		.cancel-btn {
			margin-right: 5px;
		}
	}
</style>
